function Page (el,options = {}){
    //保存公共属性
    this.el=document.querySelector(el)
    this.options=options
    //启动
    this.init()
}

//存放功能
Page.prototype.init=function(){
//新建标签
this.createTag()
 //点击事件
 this.bindEvent()
}

 // 绑定事件
 Page.prototype.bindEvent = function () {
    // 1 获取当前盒子
    // 2 绑定点击事件
    // 3 事件处理函数中
    // 3.1 获取事件对象
    // 3.2 获取操作的标签  判断
    // 3.3 更新当前页、并且得重新创建分页标签和页码


    // 1 获取当前盒子
    // 2 绑定点击事件
    // this.el.onclick = function (e) {
    this.el.onclick = (e) => {
        // 3 事件处理函数中
        // 3.1 获取事件对象
        let evt = e || window.event
        // 3.2 获取操作的标签  判断
        let target = evt.target || evt.srcElement

        // console.log(target.nodeName)
        // 3.3 更新当前页、并且得重新创建分页标签和页码
        if (target.nodeName === 'P') {
            // target.innerText === 首页/first   this.options.pageTag.first  
            // target.innerText === 上一页/prev  this.options.pageTag.prev
            // target.innerText === 下一页/next  this.options.pageTag.next
            // target.innerText === 末页/last    this.options.pageTag.last
            // target.innerText === ... 不管
            // target.innerText === 数字    !== ... 就是数字

            switch (target.innerText) {
                case this.options.pageTag.first:
                    this.options.pageInfo.pageNum = 1
                    break;
                case this.options.pageTag.prev:
                    // 留心：最少是第一页
                    if (this.options.pageInfo.pageNum == 1) return
                    this.options.pageInfo.pageNum--
                    break;
                case this.options.pageTag.next:
                    // 留心：最多是总页数
                    if (this.options.pageInfo.pageNum == this.options.pageInfo.totalPage) return
                    this.options.pageInfo.pageNum++
                    break;
                case this.options.pageTag.last:
                    this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
                    break;
                default:
                    // ...                               innerText  ...       NaN    innerHTML  ...        NaN
                    // 数字                              innerText  字符串数字 数字   innerHTML  字符串数字   数字
                    // 第3个盒子 P   里面有 HTML、数字    innerText  一堆数字   数字   innerHTML  字符串+数字  NaN
                    if (parseInt(target.innerHTML) > 0) {
                        this.options.pageInfo.pageNum = parseInt(target.innerHTML)
                    }
                    break;
            }
            // 清空分页数据，重新创建
            this.createTag()
        }
    }
}

//创建标签
// 需求：获取options里面的pageTag 遍历创建分页标签 追加到最大的盒子中
Page.prototype.createTag=function(){
//qingkong
this.el.innerHTML=''

let pageTag=this.options.pageTag
for(let key in pageTag){
//遍历 创建p标签 把它放到盒子里
this.createP('p',pageTag[key],this.el)
    }
this.createNum()
}   
//创建页码
Page.prototype.createNum=function(){
    let page3Tag=this.el.querySelector('p:nth-of-type(3)')
    page3Tag.style.border='none'
    page3Tag.style.margin='0px'
    page3Tag.style.padding='0px'

/*     for(i=1;i<6;i++){
this.createP('p',i,page3Tag)
    } */
// 1 2 3 4 5 ... 99 100  	     pageNum < 5
        // 1 2 3 4 5 6 7 ... 99 100     pageNum == 5
        // 1 2 ... 4 5 6 7 8 .. 99 100  pageNum > 5 && pageNum < 总页数-4
        // 1 2 ... 96 97 98 99 100      pageNum >= 总页数-4
        //算法 
    
let pageNum=this.options.pageInfo.pageNum  //获取当前的数
this.options.pageInfo.totalPage=Math.ceil(this.options.pageInfo.totalData / this.options.pageInfo.pageSize)   
console.log(this.options.pageInfo.totalPage);
let totalPage=this.options.pageInfo.totalPage //获取总的数
if(totalPage<7) {for(let i=1;i<=totalPage;i++)this.createP('p',i,page3Tag)}
else if(pageNum<5){
    for(i=1;i<6;i++)this.createP('p',i,page3Tag)
    this.createP('p','...',page3Tag)
    this.createP('p',totalPage-1,page3Tag)
    this.createP('p',totalPage,page3Tag)

}
else if(pageNum==5){
    for(let i=1;i<8;i++)this.createP('p',i,page3Tag)
    this.createP('p','...',page3Tag)
    this.createP('p',totalPage-1,page3Tag)
    this.createP('p',totalPage,page3Tag)

}
else if(pageNum>5 && pageNum<totalPage-4){
    for(let i=1;i<3;i++)this.createP('p',i,page3Tag)
    this.createP('p','...',page3Tag)
    this.createP('p',pageNum-2,page3Tag)
    this.createP('p',pageNum-1,page3Tag)
    this.createP('p',pageNum,page3Tag)
    this.createP('p',pageNum+1,page3Tag)
    this.createP('p',pageNum+2,page3Tag)
    this.createP('p','...',page3Tag)

    this.createP('p',totalPage-1,page3Tag)
    this.createP('p',totalPage,page3Tag)

}
else if(pageNum>=totalPage-4){
    for(let i=1;i<3;i++)this.createP('p',i,page3Tag)
    this.createP('p','...',page3Tag)
    this.createP('p',totalPage-4,page3Tag)
    this.createP('p',totalPage-3,page3Tag)
    this.createP('p',totalPage-2,page3Tag)
    this.createP('p',totalPage-1,page3Tag)
    this.createP('p',totalPage,page3Tag)

}







}

//封装一个 添加标签的方法
Page.prototype.createP=function(bq,nr,fbq){
    let pObj=document.createElement(bq)  //创建标签
    pObj.innerText = nr   //给创建的标签放内容
    //该style样式
    pObj.style.margin='0 5px'
    pObj.style.padding='0 5px'
    pObj.style.border='solid 1px black'
    pObj.style.display='inline-block'
    fbq.appendChild(pObj) //追加到父元素中
//选中默认的样式
if(nr==this.options.pageInfo.pageNum) pObj.style.background='orange'
}


